<template>
  <div class="page-container bottomtab-page titlebar-page" >
    <TitleBar title="发现" noback></TitleBar>
    <div class="article-wrapper">
      <ul class="list" ref="scroll">
        <li @click="gotoArticleDetails(article)" class="list-item" v-for="(article, i) of articleList" :key="i">
          <div class="image">
            <x-img  :default-src="require('../../assets/images/default-card.png')" :src="article.cardUrl" alt="" />
          </div>
          <div class="intro">
            <div class="title">
              {{article.title}}
            </div>
            <!-- <div class="extras">
              <div class="hashtag">{{article.hashtag}}</div>
              <div class="actions">
                <star-icon :size="18" style="color: #777;"></star-icon>
                <span class="action-label">{{article.like}}</span>
                <thumb-up-icon :size="18" style="color: #777;"></thumb-up-icon>
                <span class="action-label">{{article.star}}</span>
              </div>
            </div> -->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {home} from '../../requests';
import {XImg} from 'vux';
import TitleBar from '../../components/TitleBar';
export default {
  data() {
    return {
      swiperIndex: 0,
      articleList: [],
      limit: 10,
      offset: 0,
    };
  },
  mounted() {

    // for(let i = 0; i < 15 ; i++) {
    //   this.articleList.push(this.articleList[0])
    // }
    this.getArticleList()
  },
  components: {
    TitleBar,
    XImg
  },
  methods: {
    swiperChange() {},
    getArticleList() {
      let list = localStorage.getItem('discoverArticle');
      if(list) {
        this.articleList = JSON.parse(list);
      }

      let params = {
        limit: this.limit,
        offset: this.offset,
        type: 1
      }
      home.getArticleList.r(params).then(({data})=>{
        this.articleList = data.data.dataList;
        let rx = /src=\&quot;([^\&quot;]*)\&quot;/;
        this.articleList.forEach((item, i)=>{
          let res = rx.exec(item.content);
          if(res) {
            item.cardUrl = item.pictureUrl+ '/' +res[1];
          }
        });
        localStorage.setItem('discoverArticle', JSON.stringify(this.articleList))
        console.log('getArticleList', data)
      })

    },
    gotoArticleDetails(article) {
      this.$router.push({name: 'ArticleDetails', params: article})
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100%;
}
.article-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  .list{
    .list-item {
      border-bottom: 0.5px solid #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      height: 5.4rem;
      width: 100%;
      .image {
        flex: 1;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .intro {
        flex: 2;
        .title {
          padding:  5px;
          font-size: 0.9rem;
        }
        .extras {
          display: flex;
          justify-content: space-between;
          padding-right: 0.5rem;
          
          .hashtag {
            color: #eee;
          }
          .actions {
            flex-basis: 40%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
          }
          .action-label {
            font-size: 0.7rem;
            position: relative;
            top: 0;
          }
        }
      }
    }
  }
}
</style>
